<template>
  <page-header-wrapper>
    <global-search :loading="searchLoading" :list="searchList" @search="handleSearch" @reset="handleReset">
    </global-search>
    <a-card :bordered="false">
      <div class="table-header m-b-24"></div>
      <s-table
        ref="table"
        size="default"
        rowKey="ID"
        :columns="columns"
        :data="loadData"
        :scroll="{ x: true }"
        :pagination="{ showTotal: (total) => `共 ${total} 条` }"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onTableSelectChange }"
      >
        <div slot="tabAction">
          <y-button type="primary" @click="handleMultiple">确认所选</y-button>
          <y-button type="primary" @click="handleMultiple('all')">确认全部</y-button>
        </div>
        <span slot="index" slot-scope="text, record, index">{{ index + 1 }} </span>
        <ellipsis :length="26" slot="ellipsis" slot-scope="text">{{ text || '/' }}</ellipsis>
        <span slot="moment" slot-scope="text">{{ text | moment }}</span>
        <div slot="action" slot-scope="text, record">
          <a-popconfirm title="确认是否将房源变成空置？" @confirm="handleConfirm(record)" placement="left">
            <y-button type="link">确认</y-button>
          </a-popconfirm>
        </div>
      </s-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { STable, Ellipsis } from '@/components'
import {
  getAssignmentList,
  postAssignment,
  getKZQRXQXM,
  postUpdateReturnList,
  postAssignmentList,
} from '@/api/cityReviewAndManage'
export default {
  components: {
    STable,
    Ellipsis,
  },
  computed: {
    textColor() {
      return function (text) {
        if (text === '') {
          text = '未审批'
        }
        const classMap = new Map([
          ['未审批', 'text-warning'],
          ['不符合', 'text-error'],
          ['符合', 'text-success'],
        ])
        return classMap.get(text)
      }
    },
  },
  data() {
    return {
      queryParam: {
        Mode: 'ExitHousesUpVacant',
        UserID: this.$store.getters.userid,
        strContent: {},
      },
      searchLoading: false,
      searchList: [
        {
          label: '项目名称',
          fields: '项目',
          type: 'select',
          props: {
            placeholder: '请选择项目名称',
            options: [],
          },
        },
        {
          label: '小区名称',
          fields: '小区名称',
          type: 'select',
          props: {
            placeholder: '请选择小区名称',
            options: [],
          },
        },
      ],
      columns: [
        {
          title: '序号',
          align: 'center',
          width: '80px',
          scopedSlots: { customRender: 'index' },
        },
        {
          title: '安置点',
          align: 'center',
          dataIndex: '安置点',
        },
        {
          title: '项目名称',
          align: 'center',
          dataIndex: '项目',
        },
        {
          title: '区域',
          align: 'center',
          dataIndex: '分管区级',
        },
        {
          title: '小区名称',
          align: 'center',
          dataIndex: '小区名称',
        },
        {
          title: '房屋信息',
          align: 'center',
          customRender: (text, record) => `${record.栋}栋${record.单元}单元${record.楼层}-${record.附号}`,
        },
        {
          title: '户型',
          align: 'center',
          dataIndex: '结构',
        },
        {
          title: '面积',
          align: 'center',
          dataIndex: '面积',
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: '状态',
        },
        {
          title: '操作',
          align: 'center',
          width: '80px',
          fixed: 'right',
          scopedSlots: { customRender: 'action' },
        },
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        this.selectedRowKeys = []
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        return getAssignmentList(requestParameters).then((res) => res)
      },
      selectedRowKeys: [],
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.searchLoading = true
      const getXMOptions = getKZQRXQXM({ category: 'XM' })
      const getXQOptions = getKZQRXQXM({ category: 'XQ' })
      Promise.all([getXMOptions, getXQOptions])
        .then((res) => {
          const keyArr = ['项目', '小区名称']
          for (let index = 0; index < 2; index++) {
            this.searchList[index].props.options = res[index].map((e) => ({
              value: e[keyArr[index]],
              label: e[keyArr[index]],
            }))
          }
        })
        .finally(() => {
          this.searchLoading = false
        })
    },
    onTableSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    handleSearch(values) {
      this.queryParam.strContent = values
      this.tableRefresh(true)
    },
    handleReset() {
      this.queryParam.strContent = {}
      this.tableRefresh(true)
    },
    tableRefresh(refresh = false) {
      this.$refs.table.refresh(refresh)
    },
    handleMultiple(type) {
      let content = ''
      if (type === 'all') {
        content = `确认通过当前全部${this.$refs.table.localDataSource.length}数据吗？`
      } else {
        if (this.$isEmpty(this.selectedRowKeys)) {
          this.$message.warning('至少选择一条房源数据')
          return
        }
        content = `确认通过所选的${this.selectedRowKeys.length}条房源吗？`
      }
      this.$confirm({
        title: '提示',
        content,
        onOk: () => {
          const data = type === 'all' ? this.$refs.table.localDataSource.map((e) => e.ID) : this.selectedRowKeys
          // return postUpdateReturnList({
          //   id: data.join(','),
          //   UserID: this.$store.getters.userid
          // }).then((res) => {
          //   this.$message.success('房源空置成功！')
          //   this.tableRefresh()
          // })
          return postAssignmentList({
            Mode: 'ExitHousesUpVacant',
            UserName: this.$store.getters.nickname,
            ProposerID: data.join(','),
            UserID: this.$store.getters.userid,
          }).then((res) => {
            this.$message.success('房源空置成功！')
            this.tableRefresh()
          })
        },
      })
    },
    handleConfirm(record) {
      this.selectedRowKeys = []
      this.$loading.show({
        tip: '提交中...',
      })
      postAssignment({
        Mode: 'ExitHousesUpVacant',
        UserID: this.$store.getters.userid,
        UserName: this.$store.getters.nickname,
        ProposerID: record.ID,
      })
        .then((res) => {
          this.$message.success('房源空置成功！')
          this.tableRefresh()
        })
        .finally(() => {
          this.$loading.hide()
        })
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .ant-table td {
  white-space: nowrap;
}
</style>
